<template>
	<view class="placeOrder">
		<view class="nav">
			<view :class="navindex==index?'item check':'item'" v-for="(item,index) in navList" :key="index" @click="selNav(index)">
				{{item.itemName}}
			</view>
		</view>
		<view class="heng"></view>
		<view v-if="formData.shipping_type==2 && merchant && merchant.id" class="address">
			<view class="pickup_phone">
				<text>联系人：{{merchant.contacts}}  商家电话：{{merchant.mobile}}</text>
			</view>
			<view class="address_info">
				<view class="address_left">提货地址：{{merchant.address}}
		        </view>
				<view class="jt"></view>
			</view>
		</view>
		<view v-if="formData.shipping_type==1 && address.id > 0" class="address"  @click="jump('address', optionsParam)">
			<view class="address_info">
				<view class="address_left">{{address.address}}
                </view>
				<view class="jt"></view>
			</view>
			<view class="address_phone">
				<text>{{address.realname}}</text>
				<text>{{address.mobile}}</text>
			</view>
		</view>
		<view class="noaddress" @click="jump('addOreditAddress', optionsParam)" v-if="formData.shipping_type==1 && address.id == 0">
			<image :src="'https://hdsq.aoorange.cn/attachment/xcx/icon/xinjiandizhi.png'" mode="widthFix"></image>
			<text>+新建地址</text>
		</view>
		<view class="heng"></view>
		<view class="line" v-if="formData.shipping_type==1">
			<view class="left">
				<text class="txt">立即送出</text>
			</view>
			<view class="right">
				<text class="txt1">约{{merchant.delivery_time}}送达</text>
			</view>
		</view>
		<view class="line nobottom" v-if="false">
			<view class="left">
				<text class="txt">支付方式</text>
			</view>
			<view class="right">
				<text class="txt1">微信支付</text>
			</view>
		</view>
		<view class="heng"></view>
		<view class="good_info">
			<view class="title">{{merchant.title}}</view>
			<view class="list" v-for="(product,index2) in productList" :key="index2">
				<view class="left">
					<image :src="product.product_img" mode="aspectFill"></image>
				    <text class="name oneline">{{product.product_name}}</text>
					<text class="dot">{{product.sku_name}}</text>
				</view>
				<view class="right">
					<text class="num">x{{product.product_num}}</text>
					<view class="pic">
						<text>￥</text>
						<text>{{product.adjust_money}}</text>
					</view>
				</view>
			</view>
		</view>
	    <view class="heng"></view>
		<view class="line">
			<view class="left">
				<text class="txt2">包装费</text>
				<text class="txt3">餐盒</text>
			</view>
			<view class="right">
				<view class="txt4">
					<text>¥</text>
					<text>{{merchant.packing_fee}}</text>
				</view>
			</view>
		</view>
		<view class="line" v-if="formData.shipping_type == 1">
			<view class="left">
				<text class="txt5">配送费</text>
				<text class="txt3">商家配送</text>
			</view>
			<view class="right">
				<view class="txt4">
					<text>¥</text>
					<text>{{merchant.delivery_fee}}</text>
				</view>
			</view>
		</view>
		<view class="line1">
			<view class="line1_txt">
				<text>小计 </text>
				<text>¥</text>
				<text>{{total_money}}</text>
			</view>
			
		</view>
		<view class="heng"></view>
		<view class="remark">
			<view class="remark_title">
				订单备注
			</view>
			<textarea value="" v-model="remark" placeholder-style="color:#999999" placeholder="订单备注～" />
		</view>
		<view class="bottom">
			<view class="left">
				<view class="allpic">
					<text>¥</text>
					<text>{{total_money}}</text>
				</view>
			</view>
			<view class="right" @click="createOrder()">确认支付</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
				<view class="title">选择支付方式</view>
				<view class="paypir">
					<text>应付金额</text>
					<text>￥{{total_money}}</text>
				</view>
				<view class="line3"  v-if="pay.total_hdq > 0">
					<view :class="formData.is_use_hdq == 1 ?'sel':'nosel'" @click="setUseHdq()"></view>
					<text>使用互动券{{pay.total_hdq}}抵扣金额￥{{pay.total_hdq}}</text>
				</view>
				<view class="line2"  v-if="account.user_money > 0">
					<text>余额支付 - 当前余额：{{account.user_money}}</text>
					<view :class="formData.payment_type == 5 ?'sel':'nosel'" @click="selPayType(5)" v-if="Number(account.user_money) >= Number(total_money)"></view>
					<text v-else>余额不足</text>
				</view>
				<view class="line2" v-if="pay.pay_money > 0">
					<text>在线微信支付</text>
					<view :class="formData.payment_type == 1 ?'sel':'nosel'" @click="selPayType(1)"></view>
				</view>
				<view class="pay_bot" @click="subPay()">确认支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	// import KXDateTime from "@/components/kx-datetime/kx-datetime.vue";
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				navList:[{itemType:1,itemName:'外卖'},{itemType:2,itemName:'自提'}],
				navindex:0,
				account: {},
				address: {},
				productList: [],
				merchant: {
					delivery_time: '',
				},
				pay: {},
				formData: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					product_id: 0,
					merchant_id : 0,
					type : '',
					data: '',
					address_id: 0,
					order_type: 3,
					payment_type : 1,
					shipping_type : 1,
					is_use_hdq : 0,
					remark: '',
				},
				optionsParam: '',
				total_money : 0,
				isSub: false,
				remark: '',
			}
		},
		components: {
			// KXDateTime
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			setUseHdq(){
				this.formData.is_use_hdq = this.formData.is_use_hdq == 1 ? 0 : 1;
				this.calculationTotalMoney();
				this.$forceUpdate();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth();
				let day = date.getDate();
				let time = date.getHours();
				let seconds = date.getMinutes();
				if(type == 'start'){
					// time = Number(time) + Number(1);
				}
				if (type === 'end') {
					day = Number(day) + Number(7);
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				console.log(`${year}-${month}-${day} ${time}:${seconds}`)
				return `${year}-${month}-${day} ${time}:${seconds}`;
			},
			selNav(index) {
				let item = this.navList[index];
				this.navindex = index;
				this.formData.shipping_type = item.itemType;
				this.calculationTotalMoney();
				this.$forceUpdate();
				// this.previewOrder();
			},
			previewOrder() {
				var self = this;
				serve
					.request({
						url: '/order/order-new/preview',
						data: self.formData
					})
					.then(res => {
						if(res.code != 200) {
							uni.showToast({
								title: res.message,
								icon : 'none',
								success:function(){ 
									setTimeout(function () { 
										// common.jump(res.code == 199 ? 'login' : (self.formData.type == 'cart' ? 'cart' : 'product_list'), 0);
										return ;
									}, 2000) 
								} 
							});
							return;
						}
						self.account = res.data.account;
						self.address = res.data.address;
						self.formData.address_id = self.address.id;
						self.productList = res.data.productList[0].productList;
						self.merchant = res.data.productList[0];
						self.pay = res.data.pay;
						self.calculationTotalMoney();
						self.$forceUpdate();
					});
			},
			close() {
				this.$refs.popup.close();
			},
			createOrder() {
				if(this.formData.shipping_type == 1 && this.formData.address_id == 0) {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none'
					})
					return;
				}
				this.$refs.popup.open();
				return ;
			},
			selPayType(payType) {
				let needPayMoney = this.pay.pay_money;
				if(this.formData.is_use_hdq == 1) {
					needPayMoney = Number(needPayMoney) - Number(this.pay.total_hdq);
				}
				if(payType == 5 && Number(needPayMoney) > Number(this.account.user_money)) {
					return ;
				}
				this.formData.payment_type = payType;
			},
			subPay() {
				this.formData.remark = this.remark != '' ? this.merchant.id+':'+this.remark : '';
				serve
					.request({
						url: '/order/order-new/create',
						data: this.formData
					})
					.then(res => {
						if(res.code == 200) {
							if(res.data.pay_type == 1) {
								this.wechatPay(res.data.pay_code);
								return ;
							} else {
								uni.showToast({
									title: "支付成功",
									icon : 'none',
								});
								uni.redirectTo({
								    url: '/myOrder/order/takeView?id='+res.data.pay_code
								});
							}
							return ;
						} 
						uni.showToast({
							title: res.message,
							icon : 'none',
						});
					});
			},
			wechatPay(operateId){
				var self = this;
				serve
					.request({
						url: '/order/pay/wechat',
						data:{
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							data_id:operateId,
							data_type: 'order_pay',
						}
					})
					.then(res => {
						if(res.code != 200) {
							uni.showToast({
								title:res.message,
								icon: 'none'
							});
							return ;
						}
						let payId = res.data.payId;
						let payConfig = res.data.payConfig;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payConfig.timeStamp,
							nonceStr: payConfig.nonceStr,
							package: payConfig.package,
							signType: payConfig.signType,
							paySign: payConfig.paySign,
							success: function (res) {
								// self.paySuccess(operateId, 'wechat');
								self.queryPayResult(payId);
								return ;
							},
							fail: function (err) {
								uni.showToast({
									title: '放弃支付',
									icon: 'none'
								});
								uni.redirectTo({
								    url: '/myOrder/order/takeView?id='+res.data.operateId
								});
								// common.jump('order_view', operateId);
								return ;
							}
						})
					});
				return ;
			},
			paySuccess(operateId, payType) {
				serve
					.request({
						url: '/order/order/pay',
						data:{
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							order_id:operateId,
							pay_type: payType
						}
					})
					.then(res => {
						uni.showToast({
							title:res.message,
							icon: 'none'
						});
						if(res.code == 200) {
							common.jump('order_view', operateId);
							return ;
						} 
					});
				return ;
			},
			queryPayResult(payId) {
				// if(!isNext) {
				// 	uni.showToast({
				// 		title: '支付成功',
				// 		icon: 'none'
				// 	});
				// 	common.jump('lobby_order_view', operateId);
				// }
				uni.showLoading({
					title: '支付结果查询中···',
					mask: true
				});
				var self = this;
				setTimeout(function() {
					serve.request({
						url: '/payservice/query-pay',
						data:{
							appkey: uni.getStorageSync('appkey'),
							payId: payId,
						}
					}).then(res => {
						if(res.data.payStatus == 1) {
							uni.redirectTo({
							    url: '/myOrder/order/takeView?id='+res.data.dataId
							});
						} else {
							self.queryPayResult(payId);
						}
					});
				}, 1500);
			},
			// kxdatetime(e, type) {
			// 	this.formData.lobby_eat_time = e;
			// },
			calculationTotalMoney() {
				let totalMoney = Number(this.merchant.pay_total_money) + Number(this.merchant.packing_fee);
				if(this.formData.shipping_type == 1) {
					totalMoney = Number(totalMoney) + Number(this.merchant.delivery_fee);
				}
				if(this.formData.is_use_hdq == 1) {
					totalMoney = Number(totalMoney) - Number(this.pay.total_hdq);
				}
				console.info(totalMoney);
				this.total_money = parseFloat(totalMoney).toFixed(2);
				this.$forceUpdate();
			},
			jump(jump_type, jump_link){
				if(jump_type == "address") { //收货地址
					uni.redirectTo({
					    url: '/pages/my/deliveryAddress?'+jump_link
					});
					return ;
				}
				if(jump_type == "addOreditAddress") { //新增或修改收货地址
					uni.redirectTo({
					    url: '/pages/my/newAddress?'+jump_link
					});
					return ;
				}
				common.jump(jump_type, jump_link);
			},
		},
		onLoad(options) {
			console.info(options);
			this.formData.type = options.type || 'cart';
			this.formData.order_type = options.order_type || 3;
			this.formData.data = options.data || '';
			if(this.formData.data == '') {
				uni.showToast({
					title: '网络异常',
					icon : 'none',
					success:function(){ 
						setTimeout(function () { 
							uni.navigateBack({
								delta: 1
							})
							return ;
						}, 2000) 
					} 
				});
			}
			this.formData.address_id = options.address_id || 0;
			this.optionsParam = 'type='+this.formData.type+'&order_type='+this.formData.order_type+'&data='+this.formData.data;
			this.previewOrder();
		},
		onPullDownRefresh() {
			this.previewOrder();
		}
	}
</script>

<style scoped lang="scss">
	.placeOrder{
		padding-bottom: 100upx;
		.bottom{
			border-top: 1upx #EBEBEF solid;
			background: #FFFFFF;
			box-sizing: border-box;
			width:100%;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height:100upx;
			background:rgba(255,255,255,1);
			box-shadow:0px 1px 0px 0px rgba(235,235,239,1);
			.left{
				display: flex;
				align-items: center;
				.allpic{
					display: flex;
					align-items: center;
					color: #EB5937;
					margin-left: 28upx;
					text:nth-child(1){
						font-size: 18upx;
					}
					text:nth-child(2){
						font-size: 32upx;
					}
					
				}
				.bottom_info{
					color: #999999;
					font-size: 20upx;
					margin-left: 13upx;
				}
			}
			.right{
				width:226upx;
				height:100upx;
				line-height: 100upx;
				text-align: center;
				color: #FFFFFF;
				font-size: 28upx;
				background:rgba(235,89,56,1);
			}
		}
		.nav{
			box-sizing: border-box;
			padding: 25upx 0upx 25upx;
			display: flex;
			.item{
				font-size:28upx;
				color:#999999;
				padding: 16upx 34upx;
				background:rgba(245,245,245,1);
				border-radius:30upx;
				margin-left: 30upx;
			}
			.check{
				background: #FFF8E8;
				color: #FFBB00;
			}
		}
		.address{
			box-sizing: border-box;
			padding: 35upx 30upx;
			.address_info{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.address_left{
					color: #333333;
					font-size: 32upx;
					max-width: 577upx;
				}
				.jt{
					 display: inline-block;  
					 border-top: 1upx solid rgba(153,153,153,0.6); 
					 border-right: 1upx solid rgba(153,153,153,0.6);  
					 width: 14upx;
					 height: 14upx;  
					 transform: rotate(45deg); 

				}
			}
			.address_phone{
				margin-top: 40upx;
				font-size: 24upx;
				color: #999999;
				text:last-child{
					margin-left: 30upx;
				}
			}
			.pickup_phone{
				margin-bottom: 20upx;
				font-size: 34upx;
			}
		}
		.noaddress{
			 height: 190upx;
			 width: 100%;
			 display: flex;
			 justify-content: center;
			 align-items: center;
			 image{
				width:40upx;
				height: 40upx;
			 }
			 text{
				 font-size:32upx;
				 font-weight:bold;
				 color:rgba(235,89,56,1);
				 margin-left: 10upx;
			 }
		}
		.number{
			box-sizing: border-box;
			padding: 20upx 30upx;
			input{
				width: 100%;
				height:90upx;
				background:rgba(245,245,245,1);
				border-radius:45upx;
				text-align: center;
				font-size: 28upx;
			}
			.lobby_eat_time{
				width: 100%;
				height: 45px;
				background: whitesmoke;
				border-radius: 22px;
				text-align: center;
				font-size: 14px;
				line-height: 45px;
			}
		}
		.heng{
			background: #F8F8F8;
			height:16upx;
			width: 100%;
		}
		.line1{
			display: flex;
			padding: 0upx 46upx;
			box-sizing: border-box;
			justify-content: flex-end;
			height: 80upx;
			.line1_txt{
				padding-top: 18upx;
				text:nth-child(1){
					color: #999999;
					font-size: 20upx;
					padding-right: 18upx;
				}
				text:nth-child(1){
					color: #999999;
					font-size: 20upx;
				}
				text:nth-child(2){
					color: #EB5937;
					font-size: 18upx;
					font-weight: bold;
				}
				text:nth-child(3){
					color: #EB5937;
					font-size: 32upx;
					font-weight: bold;
				}
			}
			
		}
		.line{
			position: relative;
			height: 100upx;
			box-sizing: border-box;
			display: flex;
			padding: 0upx 30upx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1upx #EBEBEF solid;
			.left{
				display: flex;
				align-items: center;
				.txt{
					color: #333333;
					font-size: 28upx;
					font-weight: bold;
				}
				.txt2{
					font-size: 20upx;
					color: #EB5937;
					border:1px solid rgba(235,89,55,1);
					padding: 0upx 4upx;
				}
				.txt3{
					color: #656565;
					font-size: 28upx;
					margin-left: 15upx;
				}
				.txt5{
					font-size: 20upx;
					color: #FFFFFF;
					padding: 0upx 4upx;
					background-color: #EB5937;
				}
				.txt6{
					font-size: 20upx;
					color: #EB5937;
					padding: 0upx 16upx;
					background-color: #FBDED7;
				}
			}
			.right{
				.txt1{
					color: #EB5937;
					font-size: 32upx;
					font-weight:bold;
				}
				.txt4{
					font-weight: bold;
					color: #333333;
					text:nth-child(1){
						font-size: 18upx;
					}
					text:nth-child(2){
						font-size: 32upx;
					}
				}
				.txt7{
					padding-right: 20upx;
					font-weight: bold;
					color: #EB5937;
					text:nth-child(1){
						font-size: 18upx;
					}
					text:nth-child(2){
						font-size: 32upx;
					}
				}
			}
		}
		.rightjt::after{
			position: absolute;
			right: 30upx;
			top: 48upx;
			content: '';
			border: 1upx solid rgba(153,153,153,0.6);
			border-width: 0 3upx 3upx 0;
			padding: 6upx;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
		}
		.nobottom{
			border: none !important;
		}
		.good_info{
			box-sizing: border-box;
			padding: 40upx 30upx 60upx;
			.title{
			   font-size: 24upx;
			   color: #333333;
			   font-weight: bold;
			}
			.list{
				padding-top: 40upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					position: relative;
					display: flex;
					align-items: center;
					image{
						width:64upx;
						height:64upx;
						margin-right: 20upx;
					}
					.name{
						font-size:31upx;
						font-weight:bold;
						color: #333333;
						max-width: 400upx;
					}
					.dot{
						position: absolute;
						color: #999999;
						font-size: 20upx;
						left:84upx;
						bottom: -20upx;
					}
				}
			    .right{
					width: 250upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.num{
						font-size: 20upx;
						color: #999999;
					}
					.pic{
						color: #333333;
						font-weight:bold;
						text:nth-child(1){
							font-size: 18upx;
						}
						text:nth-child(2){
							font-size: 32upx;
						}
					}
				}
			}
		}
	    .remark{
			box-sizing: border-box;
			padding: 35upx 28upx 45upx;
			.remark_title{
				color: #333333;
				font-size: 28upx;
			}
			textarea{
				margin-top: 34upx;
				width:100%;
				height:200upx;
				background:rgba(153,153,153,0.1);
				box-sizing: border-box;
				padding: 33upx 38upx;
				font-size: 32upx;
				border-radius:12upx;
			}
		}
		.pay_type{
			position: relative;
			z-index: 200;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 140upx;
			.close{
				position: absolute;
				width:23upx;
				height:23upx;
				right: 40upx;
				top: 45upx;
			}
			.title{
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 36upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}
			.paypir{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50upx 0upx 20upx;
				font-size: 28upx;
				text:last-child{
					color: #FF5F60;
					font-size: 40upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}
			.line2{
				width: 100%;
				box-sizing: border-box;
				padding: 36upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				color: #333333;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
				.txt{
					color: #999999;
				}
				.sel {
					background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
				
				.nosel {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 50%;
				}
			}
			.line3{
				width: 100%;
				box-sizing: border-box;
				padding: 36upx;
				display: flex;
				font-size: 28upx;
				color: #333333;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
				.txt{
					color: #999999;
					padding-left: 20upx;
				}
				.sel {
					background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
				
				.nosel {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 50%;
				}
			}
			.pay_bot {
			  width: 100%;
			  position: fixed;
			  left: 0;
			  bottom: 0;
			  height: 100upx;
			  background: #FFBF0A;
			  color: #fff;
			  font-size: 32upx;
			  line-height: 100upx;
			  text-align: center;
			  border-radius: 0;
			  &::after{
				  border: none;
			  }
			}
		}
	}
</style>